<template>
  <div class="app-container">
    <div class="filter-container" style=" display: flex;">
      <div style="width: 60%; padding-right: 1px;">
        <el-form ref="dataForm" :model="form" label-width="150px" :rules="rules" style="width:100%;margin-top:20px">
          <el-form-item label="标题：" prop="type">
            <el-col :span="24">
              <el-input v-model="form.title" style="width: 320px;" placeholder="" />
            </el-col>
          </el-form-item>

          <el-form-item label="所属模板：" prop="type">
            <el-col :span="24">
              <el-checkbox-group v-model="form.type">
                <el-checkbox v-for="(item) in template" :key="item.id" :label="item.id" name="type">
                  {{ item.template_name }}
                </el-checkbox>
              </el-checkbox-group>
            </el-col>
          </el-form-item>

          <el-form-item label="优先级：" prop="priority">
            <el-col :span="24">
              <el-input-number v-model="form.priority" style="width: 150px;" :min="1" :max="1000"
                placeholder="请输入优先级" />
              <span style="margin-left: 15px;">抽取类型： 实体及关系抽取</span>
            </el-col>
          </el-form-item>

          <el-form-item label="目标区域：" prop="priority">
            <el-col :span="24" style="display: flex;">
              <div>
                <el-radio v-model="form.targetAreaType" label="1">
                  全文
                </el-radio>
                <!-- <el-radio v-model="form.targetAreaType" label="2">
                  每自然段
                </el-radio> -->
                <el-radio v-model="form.targetAreaType" label="3">
                  表达式
                </el-radio>
              </div>
              <div v-if="form.targetAreaType=='3'" style="margin-left: 10px;">
                <el-input v-model="form.targetAreaTypeRegular" style="width: 200px;" placeholder="请输入内容" />
              </div>
              <div>
                <el-button style="margin-left: 10px;" @click="targetAreaPreview">
                  预览
                </el-button>
              </div>
            </el-col>
          </el-form-item>

          <el-form-item label="目标区域内是否多项内容：" prop="priority">
            <el-col :span="24" style="display: flex;">
              <div>
                <el-radio v-model="form.regionalMultipleType" label="1">
                  否，或无法拆分
                </el-radio>
                <el-radio v-model="form.regionalMultipleType" label="2">
                  是，其中每项内容的表达式
                </el-radio>
              </div>
              <div v-if="form.regionalMultipleType=='2'" style="margin-left: 10px;">
                <el-input v-model="form.regionalMultipleTypeRegular" style="width: 150px;" placeholder="正则表达式" />
              </div>
              <div>
                <el-button :disabled="form.regionalMultipleType==1" style="margin-left: 10px;"
                  @click="getTargetAreaMultiplePreview">
                  预览
                </el-button>
              </div>
            </el-col>
          </el-form-item>

          <el-form-item label="抽取内容：" prop="priority">
            <el-col :span="24" style="">
              <div v-for="(item ,index) in list" :key="item.key">
                <div style="display: flex;">
                  <div>
                    <div style="display: flex;margin-bottom: 10px;">
                      <span style="width: 80px;">头实体类型</span>
                      <el-input v-model="item.headEntityTypeTxt" style="width: 150px; margin-left: 10px;"
                        placeholder="" />

                      <el-select v-model="item.headRegOrDic" style="width:100px;margin-left: 10px;">
                        <el-option label="正则" value="1" />
                        <el-option label="字典" value="2" />
                        <el-option label="正则加字典" value="3" />
                      </el-select>

                      <div v-if="item.headRegOrDic=='1'" style="margin-left: 10px;">
                        <el-input v-model="item.headReg" style="width: 150px;" placeholder="请输入内容" />
                      </div>

                      <div v-if="item.headRegOrDic=='2'" style="margin-left: 10px;">
                        <el-select v-model="item.headDic" style="width:100px;margin-left: 10px;">
                          <el-option v-for="( itemDic ,indexDic ) in dictionaryType" :key="itemDic.key"
                            :label="itemDic.label" :value="itemDic.label" />
                        </el-select>
                      </div>

                      <div v-if="item.headRegOrDic=='3'" style="margin-left: 10px;">
                        <el-input v-model="item.headRegAndDic" style="width: 150px;" placeholder="请输入内容" />
                        <el-select v-model="item.headDic" style="width:100px;margin-left: 10px;">
                          <el-option v-for="( itemDic ,indexDic ) in dictionaryType" :key="itemDic.key"
                            :label="itemDic.label" :value="itemDic.label" />
                        </el-select>
                      </div>

                      <div>
                        <el-button style="margin-left: 10px;"
                          @click="headPreview(item.headRegOrDic, item.headReg,item.headRadio,item.headEntityTypeTxt,item.headDic,item.headRegAndDic ,1 )">
                          预览
                        </el-button>
                      </div>
                    </div>
                    <div style="display:flex ;margin-bottom: 10px;">
                      <div>
                        <el-radio v-model="item.headRadio" label="1">
                          单个目标
                        </el-radio>
                        <el-radio v-model="item.headRadio" label="2">
                          多个目标
                        </el-radio>
                      </div>
                    </div>
                    <div style="display:flex ;margin-bottom: 10px;">
                      <span style="width: 80px;">关系类型</span>
                      <el-input v-model="item.relationshipType" style="width: 100%; margin-left: 10px;"
                        placeholder="" />
                      <div>
                        <el-button type="danger" style=" " @click.prevent="remove(index)">
                          删除
                        </el-button>
                      </div>
                    </div>
                    <div style="display: flex;margin-bottom: 10px;">
                      <span style="width: 80px;">尾实体类型</span>
                      <el-input v-model="item.tailEntityTypeTxt" style="width: 120px; margin-left: 10px;"
                        placeholder="" />

                      <el-select v-model="item.tailRegOrDic" style="width:100px;margin-left: 10px;">
                        <el-option label="正则" value="1" />
                        <el-option label="字典" value="2" />
                        <el-option label="正则加字典" value="3" />
                        <el-option label="固定字段" value="4" />
                      </el-select>

                      <div v-if="item.tailRegOrDic=='1'" style="margin-left: 10px;">
                        <el-input v-model="item.tailReg" style="width: 120px;" placeholder="请输入内容" />
                      </div>

                      <div v-if="item.tailRegOrDic=='4'" style="margin-left: 10px;">
                        <el-input v-model="item.guding" style="width: 120px;" placeholder="请输入固定内容" />
                      </div>

                      <div v-if="item.tailRegOrDic=='2'" style="margin-left: 10px;">
                        <el-select v-model="item.tailDic" style="width:100px;margin-left: 10px;">
                          <el-option v-for="( itemDic ,indexDic ) in dictionaryType" :key="itemDic.key"
                            :label="itemDic.label" :value="itemDic.label" />
                        </el-select>
                      </div>

                      <div v-if="item.tailRegOrDic=='3'" style="margin-left: 10px;">
                        <el-input v-model="item.tailRegAndDic" style="width: 120px;" placeholder="请输入内容" />
                        <el-select v-model="item.tailDic" style="width:100px;margin-left: 10px;">
                          <el-option v-for="( itemDic ,indexDic ) in dictionaryType" :key="itemDic.key"
                            :label="itemDic.label" :value="itemDic.label" />
                        </el-select>
                      </div>

                      <div>
                        <el-button style="margin-left: 10px;"
                          @click="headPreview(item.tailRegOrDic, item.tailReg,item.tailRadio,item.tailEntityTypeTxt,item.tailDic,item.tailRegAndDic,2,item.guding )">
                          预览
                        </el-button>
                      </div>
                    </div>
                    <div style="display:flex ;margin-bottom: 10px;">
                      <div>
                        <el-radio v-model="item.tailRadio" label="1">
                          单个目标
                        </el-radio>
                        <el-radio v-model="item.tailRadio" label="2">
                          多个目标
                        </el-radio>
                      </div>
                    </div>
                  </div>
                </div>
                <el-divider style="width: 80%;" />
              </div>
              <el-button type="primary" style=" margin-top: 10px;" @click.prevent="addRow()">
                添加实体关系抽取
              </el-button>
            </el-col>
          </el-form-item>

          <el-form-item label="启用状态：" prop="status">
            <el-col :span="15">
              <el-switch v-model="form.status" />
            </el-col>
          </el-form-item>

          <el-form-item>
            <el-button type="info" @click="$router.push('/extractionRules/page')">
              返回
            </el-button>
            <el-button :disabled="isDisabled" type="primary" @click="submit">
              保存
            </el-button>

            <el-button type="warning" @click="saveNew">
              保存并寻找新档案
            </el-button>

            <el-input v-model="form.skip_template_notes" placeholder="请输入备注内容"
              style="width: 150px; margin-left: 50px;" />
            <el-button :disabled="isDisabled" type="primary" @click="beizhu">
              跳过并备注
            </el-button>
          </el-form-item>
        </el-form>
      </div>

      <div style="padding-left: 2px; width: 40%;">
        <div style="display:flex;align-items: center;justify-content: center;flex-direction: column;">
          <div style="margin-top: 20px;  ">
            <span style="font-size: 12px;">文章案例ID</span> <el-input v-model="form.article_id"
              style="width: 150px; margin-left: 10px;" placeholder="" clearable />
            <el-button style="margin-left: 10px;" @click="fullTextPreview">
              全文预览
            </el-button>
          </div>

          <div style="margin-top: 20px;">
            <span>{{ title }}</span>
          </div>

          <el-divider />
          <div>
            <div style="font-size: 12px;white-space:pre-wrap" v-html="htmlContent" />
          </div>

          <div v-if="batch_code!=''"
            style="display: flex; flex-direction: row-reverse;justify-content: flex-start;width: 100%; font-size: 12px;" />
        </div>
      </div>
    </div>

    <el-dialog title="预览" :visible.sync="dialogVisible" width="60%">
      <div style="font-size: 12px;white-space:pre-wrap" v-html="retrunContent" />
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>

import { api } from '@/api/template'
import { dictionaryApi } from '@/api/dictionary'
import { extractionrulesApi } from '@/api/extractionrules'
import { artApi } from '@/api/art'

export default {
  components: {},
  data() {
    return {
      retrunContent: "",
      dialogVisible: false,
      batch_code: "",
      htmlContent: "",
      title: "",
      content: '',
      template: [],
      dictionaryType: [],
      isDisabled: false,
      list: [
        {
          "headEntityTypeTxt": "", "headRegOrDic": "1", "headReg": "", "headDic": "", "headRadio": "1",
          "relationshipType": "", "headRegAndDic": "",
          "tailEntityTypeTxt": "", "tailRegOrDic": "1", "tailReg": "", "tailDic": "", "tailRadio": "1",
          "tailRegAndDic": "1", "guding": "",
          "key": Date.now()
        }
      ],
      form: {
        type: [],
        id: "",
        collection_type: "实体及关系抽取",
        priority: '',
        targetAreaType: "1",
        targetAreaTypeRegular: "",
        regionalMultipleType: "2",
        regionalMultipleTypeRegular: '',
        status: true,
        extract_content: [],
        title: "",
        article_id: "",

      },
      rules: {
        type: [
          { required: true, message: '请输入模板名字', trigger: 'blur' }
        ],
        priority: [
          { required: true, message: '请输入优先级', trigger: 'blur' }
        ],


      }

    }
  },
  mounted() {
    this.getAllTemplate()
    this.getAllDictionaryType()
    this.form.id = this.$route.query.id



    if (this.form.id != null) {
      this.getDetail()

    }

    this.form.article_id = this.$route.query.article_id

    if (this.form.article_id != null) {
      this.fullTextPreview()
    }


  },
  methods: {

    async headPreview(headRegOrDic, headReg, headRadio, headEntityTypeTxt, headDic, headRegAndDic = "", type, guding = "") {
      if (this.htmlContent == "") {
        this.$message.error('请先预览全文');
        return;
      }

      const url = 'getHeadPreview';


      let params = {
        id: this.form.article_id,
        "targetAreaType": this.form.targetAreaType,
        "targetAreaTypeRegular": this.form.targetAreaTypeRegular,
        "regionalMultipleType": this.form.regionalMultipleType,
        "regionalMultipleTypeRegular": this.form.regionalMultipleTypeRegular,
        "headRegOrDic": headRegOrDic,
        "headReg": headReg,
        "headRadio": headRadio,
        "headEntityTypeTxt": headEntityTypeTxt,
        "headDic": headDic,
        "headRegAndDic": headRegAndDic,
        "guding": guding,
        "type": type,
      }

      var res = await artApi(url, params)
      if (res.code == 200) {
        this.retrunContent = res.data
        this.dialogVisible = true;

      }



    },

    async getTargetAreaMultiplePreview() {
      if (this.htmlContent == "") {
        this.$message.error('请先预览全文');
        return;
      }


      const url = 'getExpressionContent';


      let params = {
        id: this.form.article_id,
        "targetAreaType": this.form.targetAreaType,
        "targetAreaTypeRegular": this.form.targetAreaTypeRegular,
        "regionalMultipleType": this.form.regionalMultipleType,
        "regionalMultipleTypeRegular": this.form.regionalMultipleTypeRegular

      }

      var res = await artApi(url, params)
      if (res.code == 200) {
        this.retrunContent = res.data
        this.dialogVisible = true;

      }


    },

    /**
     * 目标区域预览
     */

    async targetAreaPreview() {
      if (this.htmlContent == "") {
        this.$message.error('请先预览全文');
        return;
      }

      const url = 'getTargetAreaPreview';

      var res = await artApi(url, { id: this.form.article_id, "targetAreaType": this.form.targetAreaType, "targetAreaTypeRegular": this.form.targetAreaTypeRegular })
      if (res.code == 200) {
        this.retrunContent = res.data
        this.dialogVisible = true;

      }


    },

    async fullTextPreview() {
      const url = 'getArticleByid'
      var res = await artApi(url, { id: this.form.article_id })
      if (res.code == 200) {
        // this.htmlContent = res.data.content.replace(/\n\n/g, '</p><p>').replace(/\n/g, '<br>');
        this.htmlContent = res.data.content;
        this.title = res.data.title;
        this.batch_code = res.data.batch_code
      }

    },


    async getAllDictionaryType() {
      const url = 'getAllDictionaryType'
      var res = await dictionaryApi(url, {})
      if (res.code == 200) {
        this.dictionaryType = res.data;
      }

    },

    async getAllTemplate() {

      const url = 'getAllTemplate'
      var res = await api(url, {})
      if (res.code == 200) {
        this.template = res.data;
      }
    },

    async getDetail() {

      const url = 'getExtractionRulesById'
      var res = await extractionrulesApi(url, { id: this.form.id })
      if (res.code == 200) {
        this.form.article_id = res.data.article_id
        this.form.priority = res.data.priority
        this.form.collection_type = res.data.collection_type
        this.form.targetAreaType = res.data.target_area.targetAreaType
        this.form.targetAreaTypeRegular = res.data.target_area.targetAreaTypeRegular
        this.form.regionalMultipleType = res.data.target_area_multiple.regionalMultipleType
        this.form.regionalMultipleTypeRegular = res.data.target_area_multiple.regionalMultipleTypeRegular
        this.list = res.data.extract_content
        this.form.type = res.data.type
        this.form.id = res.data.id
        this.form.title = res.data.title

        const copy = this.$route.query.copy;

        if (copy == 2) {
          this.form.id = null;
        }



        if (res.data.status == "1") {
          this.form.status = true
        } else if (res.data.status == "0") {
          this.form.status = false
        }

      }

    },



    addRow() {
      let row = {
        "headEntityTypeTxt": "", "headRegOrDic": "1", "headReg": "", "headDic": "", "headRadio": "1",
        "relationshipType": "",
        "tailEntityTypeTxt": "", "tailRegOrDic": "1", "tailReg": "", "tailDic": "", "tailRadio": "1",
        "key": Date.now()
      };
      this.list.push(row)
    },



    remove(index) {
      let mun = this.list.length

      if (mun <= 1) {
        this.$message.error('至少保留一个')
        return
      }

      this.list.splice(index, 1)

    },

    async beizhu() {

      const url = 'skipNotes'


      var res = await extractionrulesApi(url, this.form)
      if (res.code == 200) {


        this.$message.error(res.message)
        setTimeout(() => {
          window.location.href = '/template/save?article_id=' + res.data
        }, 1500)



      } else {
        this.$message.error(res.message)
      }

    },

    saveNew() {

      this.$refs.dataForm.validate(async valid => {
        if (valid) {
          // this.isDisabled = true
          let params = this.form

          console.log(this.form)

          if (this.form.status) {
            params.status = 1;
          } else {
            params.status = 0;
          }

          params.extract_content = this.list;
          const url = 'saveOrUptExtractionrulesFind'
          var res = await extractionrulesApi(url, params)
          if (res.code == 200) {
            this.$message.success(res.message)
            setTimeout(() => {
              window.location.href = '/extractionRules/relationshipExtractionSave?article_id=' + res.data
            }, 1500)


          } else {
            this.$message.success(res.message)
          }

        }
      })

    },

    submit() {
      this.$refs.dataForm.validate(async valid => {
        if (valid) {
          // this.isDisabled = true
          let params = this.form

          console.log(this.form)

          if (this.form.status) {
            params.status = 1;
          } else {
            params.status = 0;
          }

          params.extract_content = this.list;
          const url = 'saveOrUptExtractionrules'
          var res = await extractionrulesApi(url, params)
          if (res.code == 200) {
            this.$message.success('操作成功！')
            this.$router.push('/extractionRules/page')
          }
          this.isDisabled = false
        }
      })
    }



  }
}
</script>

<style scoped>
.el-divider--horizontal {
  width: 80%;
}

.filter-container {
  position: relative;
  align-items: baseline;
}

.filter-container::after {
  content: "";
  position: absolute;
  top: 10%; /* 上边距，可以根据需要调整 */
  bottom: 10%; /* 下边距，可以根据需要调整 */
  left: 58%; /* 调整为左边div的宽度百分比加上它的padding */
  width: 2px; /* 分隔线宽度 */
  background-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0) 49%,
    rgba(0, 0, 0, 1) 50%,
    rgba(0, 0, 0, 0) 100%
  );
  background-size: 2px 4px; /* 控制虚线的宽度和间隔 */
}
</style>
